import React from 'react'
//从antd官网中导入Button组件
import { Button, Checkbox, Form, Input } from 'antd';
//导入icon图标
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
export default function App() {
  //创建表单的实例对象
  let [form] = Form.useForm();
  let fun = () => {
    console.log('fun....');
  }
  //声明事件函数
  let finish = () => {
    //收集表单元素的数据
    //getFieldsValue:获取所有字段的值
    console.log(form.getFieldsValue());
  }
  return (
    <div>
      <Button type="primary">Primary Button</Button>
      <Button type="primary" icon={<SearchOutlined />}>
        搜索
      </Button>
      <Button type="primary" icon={<DeleteOutlined />} block>
        删除
      </Button>
      <Button type="primary" disabled>
        危险按钮
      </Button>
      <Button type="primary" ghost loading>
        幽灵按钮
      </Button>
      <Button type="primary" htmlType='reset' size="small" onClick={fun}>
        按钮类型
      </Button>
      <hr />
      <h3>表格组件</h3>
      <Form
        name="form"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 5 }}
        initialValues={{ remember: false, username: 'admin', password: '123456' }}
        autoComplete="off"
        form={form}
        onFinish={finish}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="联系电话"
          name="usertel"
          rules={
            [
              { required: true, message: '请输入联系电话' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的电话格式'
              }
            ]
          }
        >
          <Input />
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 4, span: 3 }}>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 4, span: 3 }}>
          <Button type="primary" htmlType="submit">
            用户注册
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
